<!-- 积分商城 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="积分商城" :borderBottom="false"></u-navbar>
		<view class="wrap">
			<view class="signUp" @click="signday">每日签到</view>
			<view class="mall">积分<text>兑换</text>商城</view>
			<view class="msg">为您<text>专业打造</text>积分兑换</view>
		</view>
		<view class="card flex_bet_align flex_bet_alignBoxs">
			<view class="flex_align">
				<image class="avatar" :src="user.avatarUrl"></image>
				<view class="count">可用积分:{{integral}}</view>
			</view>
			<navigator hover-class="none" url="./myExchange" class="flex_align flex_alignw">
				<view class="record">查看兑换记录</view>
				<view class="iconfont icon-xwtubiaoku-03"></view>
			</navigator>
		</view>
		<view class="title">
			<view class="">好物兑换</view>
			<view class="chart" @click="chart">查看分类</view>
		</view>
		<navigator hover-class="none" :url="'./pointGoodsDetail?id='+item.id" class="item flex_align" v-for="(item, index) in list" :key="index">
			<view class="goodsImgs">
				<image class="goodsImg" :src="item.image"></image>
			</view>
			<view class="flex_bet_alignsBox">
				<view class="goodsName clamp2">{{item.title}}</view>
				<view class="num">限量{{item.limit}}份</view>
				<view class="flex_bet_align flex_bet_aligns">
					<view>
						<view class="price">{{item.integral}}积分</view>
						<view class="saleNum">已兑{{item.exchange_num}}件</view>
					</view>
					<view class="btn">立即兑换</view>
				</view>
			</view>
		</navigator>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
		
		<view v-if="signstatus" class="signbox">
			<image src="../static/img/qd.png" mode="widthFix"></image>
			<view class="signScore">
				积分<text>+{{score}}</text>
			</view>
			<view class="tomorrow" @click="signstatus = false">明天再来</view>
		</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				list: [],
				nomore:false,
				integral:0,
				user:{},
				signstatus: false, //签到显示状态
				// 积分数量
				score:0
			}
		},
		onLoad(options) {
			_this=this
			_this.integral=options.integral
			_this.user=wx.getStorageSync("user")
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('integralstore', {}, (data) => {
					console.log("进入")
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore=data.nomore
				})
			},
			// 查看分类
			chart() {
				uni.navigateTo({
					url: '/personal/classification'
				})
			},//签到
			signday: function() {
				_this.$api.islogin(()=>{
					_this.$api.get("signin", {}).then(data => {
						_this.score=data.score
						_this.signstatus = true
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: PingFang SC;
	}

	.wrap {
		width: 749rpx;
		height: 300rpx;
		background: #38be8c;
		padding: 34rpx 33rpx 0;

		.signUp {
			font-size: 26rpx;
			font-weight: 500;
			text-align: right;
			color: #ffffff;
		}

		.mall {
			font-size: 48rpx;
			font-family: FZLTZHK, FZLTZHK--GBK1-0;
			font-weight: -GBK1-0;
			text-align: center;
			color: #ffffff;
			line-height: 48rpx;
			letter-spacing: 1rpx;

			text {
				color: #FEB431;
			}
		}

		.msg {
			font-size: 24rpx;
			font-family: FZLTZHK, FZLTZHK--GBK1-0;
			font-weight: -GBK1-0;
			text-align: center;
			color: #ffffff;
			line-height: 36rpx;
			letter-spacing: 1rpx;

			text {
				color: #FEB431;
			}
		}
	}

	.card {
		width: 690rpx;
		height: 100rpx;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(56,190,140,0.5);
		border-radius: 8rpx;
		position: relative;
		top: -75rpx;
		left: 30rpx;

		.avatar {
			width: 46rpx;
			height: 46rpx;
			border-radius: 23rpx;
			background-color: #18B566;
			margin-right: 15rpx;
		}

		.count {
			font-size: 24rpx;
			font-weight: 700;
			color: #222222;
		}

		.record {
			font-size: 26rpx;
			font-weight: 500;
			color: #646c7e;
			margin-right: 13rpx;
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: 700;
		color: #323232;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.item {
		padding: 40rpx 28rpx 35rpx 40rpx;
		border-bottom: 1rpx solid #EEEEEE;

		.goodsImg {
			width: 208rpx;
			height: 208rpx;

		}

		.goodsName {
			font-size: 30rpx;
			font-weight: 700;
			color: #000000;
		}

		.num {
			font-size: 20rpx;
			font-weight: 500;
			color: #9c9c9c;
			margin-bottom: 20rpx;
		}

		.price {
			font-size: 36rpx;
			font-weight: 700;
			color: #f73f3f;
		}

		.saleNum {
			font-size: 20rpx;
			font-weight: 500;
			color: #9c9c9c;
			letter-spacing: -1rpx;
		}

		.btn {
			width: 146rpx;
			height: 51rpx;
			background: linear-gradient(86deg, #38be8c 0%, #05adbb 100%);
			border-radius: 26rpx;
			font-size: 26rpx;
			font-weight: 700;
			text-align: center;
			line-height: 51rpx;
			color: #ffffff;
		}
	}

	.flex_bet_aligns {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}


	.goodsImgs {
		width: 208rpx;
		height: 208rpx;
		border-radius: 8rpx;
		background-color: #EEEEEE;
		margin-right: 40rpx;
	}

	.flex_align {
		display: flex;

	}

	.flex_bet_alignsBox {
		width: 100%;
	}

	.chart {
		font-size: 32rpx;
		font-weight: 700;
		color: #999999;
	}
	.signbox {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba($color: #000000, $alpha: 0.8);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 10003;

		image {
			width: 520rpx;
			animation: bulingbuling 0.5s;

			@keyframes bulingbuling {
				0% {
					transform: scale(0.5);
				}

				50% {
					transform: scale(1.1);
				}

				100% {
					transform: scale(1);
				}
			}
		}

		.signScore {
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;

			text {
				font-size: 52rpx;
				color: #FFEE4D;
				margin-left: 10rpx;
			}
		}

		.tomorrow {
			margin-top: 74rpx;
			width: 176rpx;
			height: 54rpx;
			text-align: center;
			line-height: 54rpx;
			border-radius: 27rpx;
			border: 2rpx solid #fff;
			font-size: 28rpx;
			color: #fff;
		}
	}
	// .flex_bet_alignBoxs{

	// 	display: flex!important;
	// 	flex: 1;
	// 	justify-content: space-between!important;
	// }
</style>
